<template>
	<div>
		<!-- 全局注册 -->
		<!-- <baidu-map class="map"> </baidu-map> -->

		<!-- 局部注册 -->
		<baidu-map
			ref="baiduMap"
			class="map"
			:center="baiduMapConfig.center"
			:zoom="baiduMapConfig.zoom"
			:scroll-wheel-zoom="baiduMapConfig.scrollWheelZoom"
			ak="Ng57iPxBivYzzIa3q6Vpg5gQV2PlCi0l"
			@ready="ready"
		>
			<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
			<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
			<bm-marker :position="{ lng: 116.404, lat: 39.915 }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
				<bm-label content="我爱北京天安门" :label-style="{ color: 'red', fontSize: '24px' }" :offset="{ width: -35, height: 30 }" />
			</bm-marker>
		</baidu-map>
	</div>
</template>

<script>
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */

// 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
	nane: "baidu-map",
	components: {
		BaiduMap,
	},
	data() {
		return {
			baiduMapConfig: {
				// 可使用经纬度，也可使用地点字符串 如 四川省成都市金牛区
				center: {
					lng: 116.40353,
					lat: 39.915439,
				},
				zoom: 15, // 缩放等级
				scrollWheelZoom: true, // 允许滚轮缩放
			},
		};
	},
	mounted() {},
	methods: {
		ready(context) {
			console.log(context);
			// console.log(BMap, map);
			// this.baiduMapConfig.center.lng = 116.404;
			// this.baiduMapConfig.center.lat = 39.915;
			// this.baiduMapConfig.zoom = 15;
		},
	},
};
</script>

<style lang="scss" scoped>
.map {
	width: 100%;
	height: 500px;
}
</style>
